<script setup lang="ts">
import { ref, defineProps, h, shallowReactive } from "vue";
import { ArrowDown, Search, Refresh } from "@element-plus/icons-vue";
import {
  ElInput,
  ElTag,
  ElCascader,
  ElDatePicker,
  ElTreeSelect,
} from "element-plus";
interface ConfigDataItem {
  viewName: string;
  viewKey: string;
  viewWidth: string | number;
  options: any;
  viewData: string;
  dataKey: string;
  change: string;
  placeholder: string;
}

const props = defineProps({
  configData: {
    type: Array as () => ConfigDataItem[],
    default: () => [],
  },
});

// 动态组件映射
const componentMap: any = {
  ElInput: (props: any) => h(ElInput, { ...props }),
  ElTag: (props: any) => h(ElTag, { ...props }),
  ElCascader: (props: any) => h(ElCascader, { ...props }),
  ElDatePicker: (props: any) => h(ElDatePicker, { ...props }),
  ElTreeSelect: (props: any) => h(ElTreeSelect, { ...props }),
};

// 动态渲染组件
const renderComponent = shallowReactive(componentMap);
const input = ref("");
const isSelect = ref(false);

const handleClose = (tag: ConfigDataItem) => {
  props.configData.forEach((item: ConfigDataItem) => {
    if (item.viewKey === tag.viewKey) {
      item.viewData = "";
    }
  });
};
function handleChange(value: any, checked: any, indeterminate: any) {
  console.log(typeof value, checked, indeterminate);
}
</script>

<template>
  <div class="search-module">
    <div class="search-head">
      <div class="flex search-ipt">
        <el-tag
          v-for="tag in configData"
          :key="tag.viewKey"
          closable
          @close="handleClose(tag)"
          type="primary"
          v-show="tag.viewData"
        >
          {{ tag.viewData }}
        </el-tag>
        <el-input
          v-model="input"
          style="width: 100%"
          placeholder="输入关键字搜索"
          clearable
        />
      </div>
      <div class="item-btn">
        <el-button :icon="Search" plain></el-button>
      </div>
      <div class="item-btn">
        <el-button @click="isSelect = !isSelect" plain>
          筛选条件<el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </el-button>
      </div>
      <div class="item-btn">
        <el-button :icon="Refresh" plain></el-button>
      </div>
    </div>
    <transition name="mybox">
      <div class="search-content" v-show="isSelect">
        <div class="item-li" v-for="(item, index) in configData" :key="index">
          <div class="item-name">{{ item.viewName }}</div>
          <el-select
            v-if="item.viewKey === 'ElSelect'"
            v-model="item.viewData"
            :placeholder="item.placeholder"
            :style="`width:${item.viewWidth}`"
            @[item.change]="handleChange"
            clearable
          >
            <el-option
              v-for="op in item.options"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            />
          </el-select>
          <component
            v-else
            v-model="item.viewData"
            :is="renderComponent[item.viewKey]"
            :style="`width:${item.viewWidth}`"
            :[item.dataKey]="item.options ? item.options : ''"
            :placeholder="item.placeholder"
            format="YYYY-MM-DD"
            multiple
            clearable
            show-checkbox
            check-strictly
            check-on-click-node
            @[item.change]="handleChange"
          >
          </component>
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.search-module {
  // display: flex;
  // flex-direction: column;
  position: relative;
  z-index: 5;
  .search-head {
    width: max-content;
    display: flex;
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    .search-ipt {
      width: 350px;
      flex-wrap: wrap;
      :deep(.el-input__wrapper) {
        box-shadow: none;
      }
      :deep(.el-tag.is-closable) {
        margin: 5px 2px;
      }
    }
    .item-btn {
      border-left: 1px solid #dcdfe6;
    }
    .el-button {
      border: none;
      height: 100%;
    }
  }

  .search-content {
    padding: 10px;
    position: absolute;
    left: 0;
    top: 110%;
    z-index: 6;
    background-color: $global-card-bg-color;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    transition: all 0.5s ease-out;
    .item-li {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dcdfe6;

      .item-name {
        text-align: right;
        margin-right: 10px;
        line-height: 1;
        padding: 16px 10px;
        border-right: 1px solid #dcdfe6;
        box-sizing: border-box;
      }
    }
  }
  .mybox-leave-active,
  .mybox-enter-active {
    transition: all 0.5s ease-out;
  }

  .mybox-enter-from,
  .mybox-leave-to {
    transform: translateY(20px);
    opacity: 0;
  }
}
</style>
